<template>
  <div>
    <Card>
      <Form ref="queryForm" :model="queryForm">
        <Row gutter="40">
          <i-col span="5">
            <FormItem prop="managecome">
              <Cascader change-on-select :data="organizationList" v-model="queryForm.managecome" @on-change="organizationChange" placeholder="续期专员机构" clearable></Cascader>
            </FormItem>
          </i-col>
          <i-col span="5">
            <FormItem prop="reagentCode">
              <Select v-model="queryForm.reagentCode" placeholder="续期专员姓名" clearable multiple>
                <Option
                  v-for="item in reagentNameList"
                  :key="item.key"
                  :value="item.key"
                >{{item.value}}-{{item.key}}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="5">
            <FormItem prop="clubName">
              <Input type="text" v-model="queryForm.clubName" placeholder="俱乐部名称" clearable />
            </FormItem>
          </i-col>
          <i-col span="5">
            <FormItem prop="buildDate">
              <DatePicker
                type="daterange"
                placement="bottom-end"
                placeholder="俱乐部成立日期起止期"
                clearable
                v-model="queryForm.buildDate"
                @on-change="workDateChange"
                style="width:100%"
              ></DatePicker>
            </FormItem>
          </i-col>
        </Row>
        <Row style="margin-bottom: -20px;">
          <i-col span="18">
            <FormItem>
              <Button type="primary" @click="submitForm" :loading="queryLoading">查询</Button>
              <Button class="resetForm" @click="resetForm" style="margin: 0 20px;">重置</Button>
              <Button type="primary" @click="addClub">新建俱乐部</Button>
            </FormItem>
          </i-col>
        </Row>
      </Form>
    </Card>

    <!-- 俱乐部列表 -->
    <Card>
      <Table :columns="clubColumns" :data="clubData">
        <template slot-scope="{row}" slot="clubNews">
          <div class="club-news">
            <img :src="row.path" alt class="club-img" />
            <span>{{row.clubName}}</span>
          </div>
        </template>
        <template slot-scope="{row}" slot="clubLevel">
          <span>
            <Rate :count="10" v-model="row.clubLevel" disabled />
          </span>
        </template>
        <template slot-scope="{row}" slot="option">
          <Button type="primary" @click="updateClub(row)">俱乐部变更</Button>
        </template>
      </Table>

      <!-- 分页 -->
      <Row>
        <i-col span="24" style="text-align:right;margin-top:20px">
          <Page
            :total="total"
            show-total
            show-sizer
            @on-change="indexChange"
            @on-page-size-change="pageSizeChange"
            :page-size-opts="pageSizeOptions"
          />
        </i-col>
      </Row>
    </Card>
    <Button type="primary" @click="info" v-if="false"></Button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryForm: {
        managecome: [],
        reagentCode: [""],
        clubName: null,
        buildDate: ["", ""]
      },
      organizationList: [],
      reagentNameList: [],
      querySubmit: false,
      clubColumns: [
        {
          title: "俱乐部名称",
          key: "clubNews",
          slot: "clubNews",
          width: "280"
        },
        {
          title: "俱乐部等级",
          key: "clubLevel",
          slot: "clubLevel",
          width: "350"
        },
        {
          title: "俱乐部奖励",
          key: "rewardListString",
          minWidth: 400
        },
        {
          title: "俱乐部成立日",
          key: "maketime",
          align: "center",
          width: "200"
        },
        {
          title: "操作",
          key: "option",
          slot: "option",
          width: "200"
        }
      ],
      clubData: [],
      /**分页*/
      index: 1, // 当前页码
      pageSize: 10, // 每页记录数量
      pageSizeOptions: [5, 10, 15, 20], //  每页条数切换的配置
      total: 0, //  总数量
      pageObj: {}
    };
  },
  methods: {
    info(tip) {
      this.$Message.info(tip);
    },
    // 续期机构拉框信息
    getProfessionalList() {
      // 续期机构下拉框
      // this.api.selectUerList().then(res => {
      //   this.organizationList = [];
      //   if (res.code == 200 && res.data != null) {
      //     this.organizationList = res.data[0].listKeyValueVOS;
      //   } else {
      //     this.organizationList = [];
      //   }
      // });
      this.api.remanagecomList().then(res => {
        if (res.code == 200 && res.data != null) {
          let arr = []
          arr.push(res.data)
          arr.forEach(one=>{
            one.value = one.comcode
            one.label = one.comcode + '-' + one.name
            one.children = one.chilDren || []
            if (one.children) {
              one.chilDren.forEach(two=>{
                two.value = two.comcode
                two.label = two.comcode + '-' + two.name
                two.children = two.chilDren || []
                if (two.children) {
                  two.children.forEach(three=>{
                    three.value = three.comcode
                    three.label = three.comcode + '-' + three.name
                    three.children = three.chilDren || []
                    if (three.children) {
                      three.children.forEach(four=>{
                        four.value = four.comcode
                        four.label = four.comcode + '-' + four.name
                        four.children = four.chilDren || []
                      })
                    }
                  })
                }
              })
            }
          })
          console.log(arr);
          this.organizationList = arr
        } else {
          this.organizationList = [];
        }
      });
    },
    // 根据管理机构查询员工
    organizationChange(value) {
      //console.log(value);
      if (!value) {
        this.reagentNameList = [];
      } else {
        this.api.selectXQCode({ managecom: value[value.length-1] }).then(res => {
          if (res.code == 200) {
            if (res.data) {
              this.reagentNameList = res.data;
            } else {
              this.reagentNameList = [];
            }
            // console.log(res);
          } else {
            this.reagentNameList = [];
            this.$Message.info(res.msg);
          }
        });
      }
    },
    workDateChange(date) {
      this.queryForm.buildDate = date;
    },
    // 查询
    submitForm(t) {
      if (t != 1) {
        this.querySubmit = true;
      }

      let obj = {
        clubName: this.queryForm.clubName, //俱乐部名称
        makestarttime: this.queryForm.buildDate[0], //俱乐部制定时间
        makeendtime: this.queryForm.buildDate[1], //俱乐部制定止时间
        managecom: this.queryForm.managecome[this.queryForm.managecome.length-1] || '', //续期管理机构
        agentcodeList: this.queryForm.reagentCode + "", //续期人员工号
        index: 1,
        pageSize: this.pageSize
      };
      // console.log(obj.clubName.length)
      for (let item in obj) {
        if (obj[item] == null || obj[item].length == 0 || obj[item] == "") {
          delete obj[item];
        }
      }
      this.pageObj = obj;
      this.clubData = [];
      this.api.queryClubAllInfo(obj).then(res => {
        if (res.code == 200) {
          if (res.data.records) {
            if (res.data.records.length>0) {
              this.clubData = res.data.records;
              this.clubData.forEach((element, index) => {
                element["rewardListString"] = "";
                if (element.rewardList) {
                  if (element.rewardList.length == 1) {
                    element["rewardListString"] = element.rewardList[0];
                  } else {
                    for (let i = 0; i < element.rewardList.length; i++) {
                      if (i < element.rewardList.length - 1) {
                        element["rewardListString"] +=
                          element.rewardList[i] + "、";
                      } else {
                        element["rewardListString"] += element.rewardList[i];
                      }
                    }
                  }
                }
                if (element.rewardListString) {
                  if (element.rewardListString.length > 22) {
                    element.rewardListString =
                      element.rewardListString.substr(0, 22) + "...";
                  }
                }
                if (element.maketime) {
                  element.maketime = element.maketime.substr(0, 10);
                }
              });
              // console.log(this.clubData)
            }else{
              this.info("暂无数据");
            }
              this.total = res.data.total;
              this.querySubmit = false;
          }
        } else {
          this.clubData = [];
          this.total = 0;
          this.querySubmit = false;
          this.info(res.msg);
        }
      });
    },
    // 重置
    resetForm() {
      this.querySubmit = false;
      this.$refs.queryForm.resetFields();
    },
    // 分页查询
    pageSubmit() {
      this.pageObj.index = this.index;
      this.pageObj.pageSize = this.pageSize;
      this.clubData = [];
      this.api.queryClubAllInfo(this.pageObj).then(res => {
        if (res.code == 200) {
          if (res.data.records) {
            this.clubData = res.data.records;
            this.clubData.forEach((element, index) => {
              element["rewardListString"] = "";
              if (element.rewardList) {
                if (element.rewardList.length == 1) {
                  element["rewardListString"] = element.rewardList[0];
                } else {
                  for (let i = 0; i < element.rewardList.length; i++) {
                    if (i < element.rewardList.length - 1) {
                      element["rewardListString"] +=
                        element.rewardList[i] + "、";
                    } else {
                      element["rewardListString"] += element.rewardList[i];
                    }
                  }
                }
              }
              if (element.maketime) {
                element.maketime = element.maketime.substr(0, 10);
              }
            });
            // console.log(this.clubData)
            this.total = res.data.total;
          }
        } else {
          this.clubData = [];
          this.total = 0;
          this.info(res.msg);
        }
      });
    },
    // 页码切换
    indexChange(e) {
      this.index = e;
      this.pageSubmit();
    },
    // 每页数量切换
    pageSizeChange(e) {
      this.pageSize = e;
      this.pageSubmit();
    },
    // 新建俱乐部
    addClub() {
      // 获取新增俱乐部的ID
      this.api.getClubid().then(res => {
        if (res.code == 200) {
          this.$router.push({
            name: "addClub",
            query: {
              clubId: res.data
            }
          });
        } else {
          this.info(res.msg);
        }
      });
    },
    // 变更俱乐部
    updateClub(row) {
      console.log(row);
      this.$router.push({
        name: "updateClub",
        query: {
          row: row
        }
      });
    }
  },
  mounted() {
    this.getProfessionalList();
    this.submitForm(1);
  }
};
</script>


<style lang="less" scoped>
@import "./club";
</style>

<style lang="less">
.ivu-icon .ivu-icon-ios-close {
  background-color: white !important;
}
</style>